<h3 mat-dialog-title>修改密码</h3>

<form [formGroup]="form" class="login-form">

  <mat-form-field appearance="standard">
    <mat-label>登录名</mat-label>
    <input matInput placeholder="登录名" formControlName="accountName" readonly>
  </mat-form-field>

  <mat-form-field appearance="standard">
    <mat-label>原密码</mat-label>
    <input matInput [type]="hidePassword ? 'password' : 'text'" formControlName="oriPassword">
    <mat-error *ngIf="form.controls['oriPassword'].hasError('required')">
      请输入原始密码
    </mat-error>
    <mat-error *ngIf="form.controls['oriPassword'].hasError('minlength')">
      原密码长度至少<strong>4个字符</strong>
    </mat-error>
  </mat-form-field>

  <mat-form-field appearance="standard">
    <mat-label>新密码</mat-label>
    <input matInput [type]="hidePassword ? 'password' : 'text'" autocomplete="off"
           formControlName="newPassword">
    <button mat-icon-button matSuffix>
      <mat-icon>visibility_off</mat-icon>
    </button>
    <mat-error *ngIf="form.controls['newPassword'].hasError('required')">
      新密码设置不能为<strong>空</strong>
    </mat-error>
    <mat-error *ngIf="form.controls['newPassword'].hasError('minlength')">
      密码长度至少<strong>4个字符</strong>
    </mat-error>
  </mat-form-field>

  <mat-form-field appearance="standard">
    <mat-label>确认新密码</mat-label>
    <input matInput type="password" formControlName="passwordConfirm">
    <mat-error *ngIf="form.controls['passwordConfirm'].hasError('required')">
      确认密码不能为<strong>空</strong>
    </mat-error>
    <mat-error *ngIf="form.controls['passwordConfirm'].hasError('minlength')">
      密码长度至少<strong>4个字符</strong>
    </mat-error>
    <mat-error *ngIf="form.controls['passwordConfirm'].hasError('pattern')">
      两次输入的密码<strong>不一致</strong>
    </mat-error>
  </mat-form-field>
</form>

<div mat-dialog-actions align="end">
  <button mat-button (click)="cancel()">取消</button>
  <button mat-button color="primary" (click)="save()" cdkFocusInitial>修改</button>
</div>
